<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="12">
          <el-button type="button" size="small" @click="addProdinfo" v-if="rule"
            >新增</el-button
          >
        </el-col>
        <el-col :span="12"> </el-col>
        <el-col :span="24" style="margin-top:10px;">
          <el-table :data="tableData" border v-loading="loading">
            <el-table-column
              fixed
              prop="pro.proName"
              label="项目名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="pro.proCity"
              label="所属城市"
            ></el-table-column>
            <el-table-column
              prop="factoryName"
              label="钢厂名"
            ></el-table-column>
            <el-table-column
              prop="pro.proLinTestTime"
              label="热试时间"
            ></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button @click="SeeClick(scope.row)" type="text" size="small"
                  >查看</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="delProinfo(scope.row.pro.id)"
                  v-if="rule"
                  >删除</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="exitProinfo(scope.row)"
                  v-if="rule"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="addProreport(scope.row)"
                  v-if="rule"
                  >宣传报道管理</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-pagination
        :page-size="5"
        :pager-count="11"
        layout="prev, pager, next"
        :total="pageSizeCount"
        @current-change="jupage"
      >
      </el-pagination>
    </el-card>
    <!-- 查看 -->
    <el-dialog title="项目详细信息" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="项目ID" :label-width="formLabelWidth">
          <el-input v-model="form.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.proName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="所属城市" :label-width="formLabelWidth">
          <el-input v-model="form.proCity" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="所属钢厂" :label-width="formLabelWidth">
          <el-input v-model="form.proFactoryId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="热试时间" :label-width="formLabelWidth">
          <el-input v-model="form.proLinTestTime" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item
          label="系统介绍——单位业务范围"
          :label-width="formLabelWidth"
        >
          <div v-html="form.proBusinessArea" class="box"></div>
        </el-form-item>
        <el-form-item label="系统介绍——系统配置" :label-width="formLabelWidth">
          <div v-html="form.proSystemConfiguration" class="box"></div>
        </el-form-item>
        <el-form-item label="系统介绍——功能简介" :label-width="formLabelWidth">
          <div v-html="form.proFunctionSummary" class="box"></div>
        </el-form-item>
        <el-form-item
          label="产线简介——产线工艺介绍/产品大纲"
          :label-width="formLabelWidth"
        >
          <div v-html="form.proLinIntroduction" class="box"></div>
        </el-form-item>
        <el-form-item
          label="产线简介——产品大纲"
          :label-width="formLabelWidth"
          v-show="false"
        >
          <div v-html="form.proLinOutline" class="box"></div>
        </el-form-item>
        <el-form-item label="产线简介——设备特点" :label-width="formLabelWidth">
          <div v-html="form.proLinFeature" class="box"></div>
        </el-form-item>
        <el-form-item label="产线简介——标志事件" :label-width="formLabelWidth">
          <div v-html="form.proLinMarkEvent" class="box"></div>
        </el-form-item>
        <el-form-item label="主要成果" :label-width="formLabelWidth">
          <div v-html="form.proOutcome" class="box"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑项目信息" :visible.sync="exitVisible">
      <el-form :model="exitForm">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="exitForm.proName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属城市" :label-width="formLabelWidth">
          <el-cascader
            :options="options"
            :show-all-levels="false"
            @change="handleChange"
            v-model="value"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="所属钢厂" :label-width="formLabelWidth">
          <el-input
            v-model="exitForm.proFactoryId"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="热试时间" :label-width="formLabelWidth">
          <el-input
            v-model="exitForm.proLinTestTime"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="系统介绍——单位业务范围"
          :label-width="formLabelWidth"
        >
          <editor
            id="proBusinessArea"
            ref="proBusinessArea"
            :editdata="exitForm.proBusinessArea"
          ></editor>
        </el-form-item>
        <el-form-item label="系统介绍——系统配置" :label-width="formLabelWidth">
          <editor
            id="proSystemConfiguration"
            ref="proSystemConfiguration"
            :editdata="exitForm.proSystemConfiguration"
          ></editor>
        </el-form-item>
        <el-form-item label="系统介绍——功能简介" :label-width="formLabelWidth">
          <editor
            id="proFunctionSummary"
            ref="proFunctionSummary"
            :editdata="exitForm.proFunctionSummary"
          ></editor>
        </el-form-item>
        <el-form-item
          label="产线简介——产线工艺介绍/产品大纲"
          :label-width="formLabelWidth"
        >
          <editor
            id="proLinIntroduction"
            ref="proLinIntroduction"
            :editdata="exitForm.proLinIntroduction"
          ></editor>
        </el-form-item>
        <el-form-item
          label="产线简介——产品大纲"
          :label-width="formLabelWidth"
          v-show="false"
        >
          <editor
            id="proLinOutline"
            ref="proLinOutline"
            :editdata="exitForm.proLinOutline"
          ></editor>
        </el-form-item>
        <el-form-item label="产线简介——设备特点" :label-width="formLabelWidth">
          <editor
            id="proLinFeature"
            ref="proLinFeature"
            :editdata="exitForm.proLinFeature"
          ></editor>
        </el-form-item>
        <el-form-item label="产线简介——标志事件" :label-width="formLabelWidth">
          <editor
            id="proLinMarkEvent"
            ref="proLinMarkEvent"
            :editdata="exitForm.proLinMarkEvent"
          ></editor>
        </el-form-item>
        <el-form-item label="主要成果" :label-width="formLabelWidth">
          <editor
            id="proOutcome"
            ref="proOutcome"
            :editdata="exitForm.proOutcome"
          ></editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exitVisible = false">取 消</el-button>
        <el-button @click="exitSub">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import api from "@/api"
import editor from '@/components/Editor.vue'
export default {
  components: {
    editor,
  },
  data() {
    return {
      loading: true,
      value: [],
      options: [],
      rule: false,
      tableData: [],
      exitForm: {},
      dialogVisible: false,
      formLabelWidth: '180px',
      form: {},
      pageSizeCount: 0,
      exitVisible: false,
    }
  },
  methods: {
    handleChange(value) {
      this.exitForm.proCity = value[1]
    },
    async getCityinfo() {
      let res = await this.$api.getProdinfo.getCity()
      if (res.data.data.length === 0) {
        this.$message('暂无城市信息')
      } else {
        let result = res.data.data
        this.options = result
      }
    },
    addProdinfo() {
      this.$router.push({
        name: 'AddProdinfo',
      })
    },
    async SeeClick(val) {
      this.dialogVisible = true
      let data = {
        id: val.pro.id,
      }
      let res = await this.$api.getProdinfo.showProItem(data)
      if (res.msg === 'success') {
        let result = res.data[0]
        this.form = result
      } else {
        this.$message({
          type: 'warning',
          info: '操作失败',
        })
      }
    },
    //分页
    async jupage(val) {
      this.tableData = []
      let nowpage = val ? val : 1
      let data = {
        page: nowpage,
        size: 5,
      }
      let _self = this
      try {
        let res = await this.$api.getProdinfo.getprodinfo(data)
        this.loading = false
        if (res.status === 200) {
          if (res.data.msg === 'success') {
            let result = res.data.data.data
            _self.pageSizeCount = parseInt(res.data.data.total)
            for (let i = 0; i < result.length; i++) {
              _self.tableData.push(result[i])
            }
          } else {
            _self.$message({
              message: '服务器错误',
              type: 'warning',
            })
          }
        }
      } catch (error) {
        _self.$message({
          message: '服务器错误',
          type: 'warning',
        })
      }
    },
    //删除项目信息
    delProinfo(val) {
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.getProdinfo.delProinfo(val).then((res) => {
            if (res.data.msg === 'success') {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              this.jupage()
            } else {
              this.$message({
                type: 'warning',
                message: '操作失败',
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消该操作',
          })
        })
    },
    //编辑弹框
    exitProinfo(val) {
      this.exitForm = JSON.parse(JSON.stringify(val.pro))
      this.value = val.pro.proCity
      this.exitVisible = true
    },
    //修改宣传信息
    async exitSub() {
      this.exitForm.proBusinessArea = this.$refs.proBusinessArea.editorContent
      this.exitForm.proSystemConfiguration = this.$refs.proSystemConfiguration.editorContent
      this.exitForm.proFunctionSummary = this.$refs.proFunctionSummary.editorContent
      this.exitForm.proOutcome = this.$refs.proOutcome.editorContent
      this.exitForm.proLinIntroduction = this.$refs.proLinIntroduction.editorContent
      this.exitForm.proLinOutline = this.$refs.proLinOutline.editorContent
      this.exitForm.proLinFeature = this.$refs.proLinFeature.editorContent
      this.exitForm.proLinMarkEvent = this.$refs.proLinMarkEvent.editorContent
      try {
        let data = {
          data: this.exitForm,
        }
        let res = await this.$api.getProdinfo.exitProinfo(data)
        if (res.data.msg === 'success') {
          this.$message({
            message: '编辑成功',
            type: 'success',
          })
          this.jupage()
        }
      } catch (error) {
        this.$message({
          message: '服务器错误',
          type: 'warning',
        })
      }
      this.exitVisible = false
    },
    //添加宣传报道信息
    addProreport(data) {
      this.$router.push({
        path: 'Report/' + data.pro.id,
      })
    },
  },
  created() {
    // this.jupage();
    // this.getCityinfo();
    // if (localStorage.getItem('rule') == 'admin') {
    // 	this.rule = true
    // }
  },
}
</script>

<style>
.el-dialog {
  width: 70%;
}

.el-form-item__content {
  margin-left: 80px;
}

.el-form-item__label {
  width: 80px;
}

.el-button--text {
  background: 0 0;
  color: #409eff;
  padding-left: 0;
  padding-right: 0;
}

.tuihuo .el-form-item__label {
  width: 100px;
}

.tuihuo .el-form-item__content {
  margin-left: 100px;
}

.box {
  width: 100%;
  height: 250px;
  overflow-y: auto;
  border: 1px solid #cccccc;
}

.mg20 {
  margin-bottom: 20px;
}
</style>
